<template>
  <div class="heroe-fate" v-if="fates.fate">
    <div class="list">
      <div class="item" v-for="(item, i) in fates.fate.hero_list" :key="i">
        <heroe-headimg :heroeId="item"></heroe-headimg>
      </div>
    </div>
    <div class="title">{{ fates.fate.name }}</div>
    <div class="desc">{{ fates.fate.effect }}</div>
  </div>
</template>

<script>
import HeroeHeadimg from "@/components/HeroeHeadimg/HeroeHeadimg.vue";
export default {
  components: {
    HeroeHeadimg,
  },
  props: {
    fates: Object,
  },
  name: "HeroeFate",
  data() {
    return {
      heroe: null,
    };
  },
};
</script>

<style lang="scss" scoped>
.heroe-fate {
  background: #f2f2f2;
  border-radius: 0.05rem;
  padding: 0.11rem;
  margin-top: 0.1rem;
  .list {
    font-size: 0;
    .item {
      margin-left: 0.1rem;
      margin-bottom: 0.1rem;
      display: inline-block;
      &:nth-child(5n + 1) {
        margin-left: 0;
      }
    }
  }
  .title {
    font-size: 0.14rem;
    color: #8c8c8c;
    line-height: 0.24rem;
  }
  .desc {
    margin-top: 0.02rem;
    font-size: 0.14rem;
    color: #333333;
    line-height: 0.24rem;
    text-align: justify;
  }
}
</style>
